前情提要

昨天學了卡片之後，接下來許多東西都可以用類似的排版，包括今天的設計

觀察設計稿

這次要達成的實作效果為：
1.四等分背景文案
2.hover圖片亮起來

以上直接附上程式碼

<section class="banner animated-line bg-black">
  <div class="container-fluid p-0 py-10 overflow-hidden">
    <div class="row g-0">
      <div class="col-lg-3 col-md-6 text-white position-relative z-0">
        <div class="card rounded-0 bg-dark text-white position-relative">
          <img
            src="../assets/images/info01.jpg"
            class="card-img opacity-25"
            alt="background image"
          />
          <div
            class="card-img-overlay rounded-0 d-flex flex-column justify-content-center align-items-start"
          >
            <span class="material-symbols-outlined mb-8 fs-6"> tooltip_2 </span>
            <h5 class="card-title">對症下藥，專案製作</h5>
            <p class="card-text mt-12 fs-4">
              除了可以瘋狂提問之<br />還有機會一起完成專案
            </p>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 text-white">...</div>
      <div class="col-lg-3 col-md-6 text-white">...</div>
      <div class="col-lg-3 col-md-6 text-white">...</div>
    </div>
  </div>
</section>

這邊的寫法是用card-img-overlay，這是bootstrap文字覆蓋圖片的方法，不然正常來說上面的寫法不可能讓文字覆蓋圖片，因為大家都是display-block，通常只能用position的方法來分層

這邊介紹第二種實作方法，也就是更常見的background-image設定，直接將圖片設為背景，就不用想辦法讓內容覆蓋圖片了，這種方式是直接在 CSS 中為容器設置背景圖片，而不是使用 標籤。這樣做的好處是更靈活，可以更好地控制圖片的顯示方式。下面是使用 CSS background-image 的示範：

<section class="banner">
  <div class="container-fluid p-0 py-10 overflow-hidden">
    <div class="row g-0">
      <div class="col-lg-3 col-md-6 text-white">
        <div class="card rounded-0 bg-dark text-white bg-image-card">
          <div
            class="card-img-overlay rounded-0 d-flex flex-column justify-content-center align-items-start"
          >
            <span class="material-symbols-outlined mb-8 fs-6"> tooltip_2 </span>
            <h5 class="card-title">對症下藥，專案製作</h5>
            <p class="card-text mt-12 fs-4">
              除了可以瘋狂提問之<br />還有機會一起完成專案
            </p>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 text-white">...</div>
      <div class="col-lg-3 col-md-6 text-white">...</div>
      <div class="col-lg-3 col-md-6 text-white">...</div>
    </div>
  </div>
</section>

/* CSS background-image常見設定 */
.bg-image-card {
  background-image: url('../assets/images/info01.jpg');
  background-size: cover; /* 確保背景圖片覆蓋整個容器 */
  background-position: center; /* 圖片居中 */
  background-repeat: no-repeat; /* 圖片不重複 */
  height: 100%; /* 確保背景圖片覆蓋整個卡片 */
  min-height: 250px; /* 設置一個最小高度，避免內容過少時高度不足 */
}

.card-img-overlay {
  background: rgba(0, 0, 0, 0.5); /* 背景覆蓋，增加可讀性 */
}

今日成果

題外話時間

GPT笑話時間，目前覺得perplexity比較有梗，但之後還有三款AI可以測

有一天，一位數學老師在課堂上問：「假如你有10塊錢，向朋友借了5塊，最後還回去，你現在有多少錢？」
小明想了想，回答：「我還是有10塊錢。」
老師困惑地問：「為什麼？」
小明驕傲地說：「因為我從來不還錢。」